<template>
    <div class="wrapper">
		<div class="header">{{personalData.Tag_Profile_IM_Nick}}</div>
		<div class="content">
			<div class="user_face">
				<span class="change_face">更换头像</span>
				<img :src="personalData.Tag_Profile_IM_Image">
				<input type="text" id="faceUrl" :value="personalData.Tag_Profile_IM_Image">
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">账号</span>
							<span class="items_text">{{loginInfo.identifier}}</span>
						</div>
						<!-- <div class="items_right"><i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">个性签名</span>
							<span class="items_text"><input type="text" id="personSignature" :value="personalData.Tag_Profile_IM_SelfSignature" name="personSignature"></span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">昵称</span>
							<span class="items_text"><input type="text" id="userName" name="userName" :value="personalData.Tag_Profile_IM_Nick"></span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">性别</span>
							<span class="items_text">
								<input type="radio" :checked="personalData.Tag_Profile_IM_Gender == 'Gender_Type_Male'" value="Gender_Type_Male" name="sex" id="">男
								<input type="radio" :checked="personalData.Tag_Profile_IM_Gender == 'Gender_Type_Female'" value="Gender_Type_Female" name="sex" id="">女
								<input type="radio" :checked="personalData.Tag_Profile_IM_Gender == 'Gender_Type_Unknown'" value="Gender_Type_Unknown" name="sex" id="">保密
							</span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">生日</span>
							<span class="items_text">{{timeFormat(personalData.Tag_Profile_IM_BirthDay)}}</span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">地区</span>
							<span class="items_text"><input type="text" id="location" name="location" :value="personalData.Tag_Profile_IM_Location"></span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="halving_line"></div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">好友添加方式</span>
							<span class="items_text">
								<input type="radio" :checked="personalData.Tag_Profile_IM_AllowType == 'AllowType_Type_NeedConfirm'" value="AllowType_Type_NeedConfirm" name="addFriend" id="">需要验证
								<input type="radio" :checked="personalData.Tag_Profile_IM_AllowType == 'AllowType_Type_AllowAny'" value="AllowType_Type_AllowAny" name="addFriend" id="">允许添加
								<input type="radio" :checked="personalData.Tag_Profile_IM_AllowType == 'AllowType_Type_DenyAny'" value="AllowType_Type_DenyAny" name="addFriend" id="">禁止添加
							</span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">消息方式</span>
							<span class="items_text">{{personalData.acceptMsg}}
								<input type="radio" :checked="personalData.Tag_Profile_IM_MsgSettings == 0" value="0" name="acceptMsg" id="">允许接收信息
								<input type="radio" :checked="personalData.Tag_Profile_IM_MsgSettings == 1" value="1" name="acceptMsg" id="">拒绝接收信息
							</span>
						</div>
						<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info" style="display: flex;">
				<button style="height: 100%; width: 50%; color: white; background: red">取消</button>
				<button @click="setProfilePortrait()" style="height: 100%; width: 50%; color: white; background: green">提交</button>
			</div>
		</div>
	</div>
</template>

<script>
//import headTop from '../../components/header/head'
//import {cityGuess, hotcity, groupcity} from '../../service/getData'
import $ from 'jquery'
import Client from '../../config/common'
export default {
    data(){
        return{
					loginInfo: {},
					personalData: { // 修改资料提交的数据
						Tag_Profile_IM_Nick: '', // 昵称
						Tag_Profile_IM_Gender: '', // 性别
						Tag_Profile_IM_AllowType: '', // 加好友验证方式
						Tag_Profile_IM_BirthDay: '', // 生日
						Tag_Profile_IM_Location: '',  // 所在地
						Tag_Profile_IM_SelfSignature: '', // 个性签名
						Tag_Profile_IM_Image: '', // 头像URL
						Tag_Profile_IM_Language: '', // 语言
						Tag_Profile_IM_MsgSettings: '', // 消息设置
						Tag_Profile_IM_AdminForbidType: '' // 管理员禁止加好友标识
					}
        }
    },

	mounted(){
        		
		},

		created () {

			// 登录初始化
    	this.initLogin();

		},
		
		methods: {

			// 登录初始化
			initLogin() {
				Client.login(this.getLoginInfo);
			},

			// 获得登录成功信息
			getLoginInfo(loginInfo) {
				// 将 登录信息保存在 vue的data里
				this.loginInfo = loginInfo;
				Client.log("登录成功-start");
				Client.log(this.loginInfo);
				Client.log("登录成功-end");

				// 设置个人资料
				this.setProfilePortraitClick();

      
			},

			// 时间格式化
			timeFormat(times) {   
    		return new Date(parseInt(times) * 1000).toLocaleString().replace(/\//g, "-"); 
			},
			
			// 设置个人信息
			setProfilePortraitClick() {
				let That = this;
					//重置表单
					// $('#spp_form')[0].reset();

					var tag_list = [
							"Tag_Profile_IM_Nick", // 昵称
							"Tag_Profile_IM_Gender", // 性别
							"Tag_Profile_IM_AllowType", // 加好友验证方式
							"Tag_Profile_IM_BirthDay", // 生日
							"Tag_Profile_IM_Location", // 所在地
							"Tag_Profile_IM_SelfSignature", // 个性签名
							"Tag_Profile_IM_Image", // 头像URL
							"Tag_Profile_IM_Language", // 语言
							"Tag_Profile_IM_MsgSettings", // 消息设置	
							"Tag_Profile_IM_AdminForbidType" // 管理员禁止加好友标识
					];
					var options = {
							'To_Account': [this.loginInfo.identifier],
							'TagList': tag_list
					};

					webim.getProfilePortrait(
							options,
							function (resp) {
									 if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
										 Client.log("个人资料");
										 Client.log(resp);
										 Client.log("个人资料");
										 
										 // That.personalData = resp;
										 for (let i = 0; i < resp.UserProfileItem["0"].ProfileItem.length; i++) {
											 let key = resp.UserProfileItem["0"].ProfileItem[i].Tag+"";
											 let value = resp.UserProfileItem["0"].ProfileItem[i].Value;
											 // 
											 That.personalData[key] = value
										 }
										 Client.log("个人处理后资料")
										 console.log(That.personalData);
										 Client.log("个人处理后资料")
									}
							},
							function (err) {
									alert(err.ErrorInfo);
							}
					);
					// $('#set_profile_portrait_dialog').modal('show');
			},

			//设置个人资料
			setProfilePortrait() {

					var image=$("#faceUrl").val();

					if ($("#userName").val().length == 0) {
							alert('请输入昵称');
							return;
					}
					if (webim.Tool.trimStr($("#userName").val()).length == 0) {
							alert('您输入的昵称全是空格,请重新输入');
							return;
					}
					var gender = $('input[name="sex"]:checked').val();
					if (!gender) {
							alert('请选择性别');
							return;
					}
					var profile_item = [
							{
									"Tag": "Tag_Profile_IM_Nick",
									"Value": $("#userName").val()
							},
							{
									"Tag": "Tag_Profile_IM_Gender",
									"Value": $('input[name="sex"]:checked').val()
							},
							{
									"Tag": "Tag_Profile_IM_AllowType",
									"Value": $('input[name="addFriend"]:checked').val()
							},
							{
								"Tag": "Tag_Profile_IM_MsgSettings",
								"Value": parseInt($('input[name="acceptMsg"]:checked').val())
							},
							{
								"Tag": "Tag_Profile_IM_SelfSignature",
								"Value": $('#personSignature').val()
							},
							{
								"Tag": "Tag_Profile_IM_Location",
								"Value": $('#location').val()
							},
					];
					if(image){//如果设置了头像URL
							profile_item.push(
									{
											"Tag": "Tag_Profile_IM_Image",
											"Value": image
									}
							);
					}
					var options = {
							'ProfileItem': profile_item
					};

					webim.setProfilePortrait(
							options,
							function (resp) {
									// $('#set_profile_portrait_dialog').modal('hide');
									// loginInfo.identifierNick = $("#spp_nick").val();//更新昵称
									// document.getElementById("t_my_name").innerHTML = webim.Tool.formatText2Html(loginInfo.identifierNick);
									alert('设置个人资料成功');
							},
							function (err) {
									alert(err.ErrorInfo);
							}
					);
			}
    },

    components:{
       // headTop
    },

    computed:{

    }
}

</script>

<style lang="scss"> 
   @import '../../style/homepage';
</style>